<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {getAccount, updateAccount, dropAccount, insertAccount} from "@/apis/manger";  // 导入API请求方法

// 账户数据
const accounts = ref([]);
const searchQuery = ref("");
const selectedRole = ref("");
const currentPage = ref(1);
const pageSize = ref(10);
const totalAccounts=ref(0);

// 控制对话框的显示
const isEditDialogVisible = ref(false);
const isAddDialogVisible = ref(false);
const currentAccount = ref({ account: "", role: "", password: "" });
const isModifyingPassword = ref(false);
// 获取账号数据
const getAccounts = async () => {
  try {
    const response = await getAccount({
      searchQuery: searchQuery.value,
      selectedRole: selectedRole.value,
      page: currentPage.value-1,
      pageSize: pageSize.value,
    });
    accounts.value = response.result.data
    accounts.value.forEach((u)=>{if (u.role===1) u.role="管理员";else u.role="学生"})
    totalAccounts.value=response.result.total
  } catch (error) {
    ElMessage.error("加载账号数据失败");
  }
};
// 编辑账号
const editAccount = (account) => {
  currentAccount.value = { ...account };
  if (currentAccount.value.account==="管理员"){
    currentAccount.value.role="1"
  }else{
    currentAccount.value.role="0"
  }
  isEditDialogVisible.value = true;
};
// 保存编辑后的账号
const saveEditAccount = async () => {
  try {
    await updateAccount(currentAccount.value,isModifyingPassword.value);  // 调用更新接口
    ElMessage.success("账号修改成功");
    isEditDialogVisible.value = false;
    await getAccounts();  // 更新列表
  } catch (error) {
    ElMessage.error("修改账号失败");
  }
};

// 删除账号
const deleteAccount = async (account) => {
  try {
    await dropAccount(account.account);  // 调用删除接口
    ElMessage.success("账号删除成功");
    await getAccounts();  // 更新列表
  } catch (error) {
    ElMessage.error("删除账号失败");
  }
};
// 新增账号
const addAccount = () => {
  currentAccount.value = { account: "", role: "", password: "" };
  isAddDialogVisible.value = true;
};
// 保存新增的账号
const saveNewAccount = async () => {
  try {
    await insertAccount(currentAccount.value);  // 调用新增接口
    ElMessage.success("账号新增成功");
    isAddDialogVisible.value = false;
    await getAccounts();  // 更新列表
  } catch (error) {
    ElMessage.error("新增账号失败");
  }
};
// 页码变化处理
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
  getAccounts();  // 更新分页数据
};

// 页面加载时获取账户数据
onMounted(() => {
  getAccounts();
});
</script>

<template>
  <el-card>
    <!-- 搜索条件 -->
    <div style="margin-bottom: 20px;">
      <el-input v-model="searchQuery" placeholder="输入账号名称" style="width: 200px; margin-right: 20px;"></el-input>
      <el-select v-model="selectedRole" placeholder="选择角色" style="width: 150px;">
        <el-option label="所有角色" value=""></el-option>
        <el-option label="管理员" value="1"></el-option>
        <el-option label="学生" value="0"></el-option>
      </el-select>
      <el-button type="primary" @click="getAccounts">搜索</el-button>
    </div>
    <el-button type="primary" @click="addAccount" style="margin-bottom: 20px;">新增账号</el-button>

    <el-table :data="accounts" style="width: 100%">
      <el-table-column label="账号名称" prop="account"></el-table-column>
      <el-table-column label="角色" prop="role"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button @click="editAccount(scope.row)" size="small">编辑</el-button>
          <el-button @click="deleteAccount(scope.row)" size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalAccounts" @current-change="handlePageChange"></el-pagination>

    <!-- 编辑账号对话框 -->
    <el-dialog v-model="isEditDialogVisible" title="编辑账号">
      <el-form :model="currentAccount">
        <el-form-item label="账号名称">
          <el-input v-model="currentAccount.account" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="currentAccount.role" placeholder="请选择角色">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="学生" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否修改密码">
          <el-radio-group v-model="isModifyingPassword">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="重置密码">
          <el-input
              v-model="currentAccount.password"
              type="password"
              :disabled="!isModifyingPassword"
          ></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button @click="isEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEditAccount">保存</el-button>
      </template>
    </el-dialog>
    <!-- 新增账号对话框 -->
    <el-dialog v-model="isAddDialogVisible" title="新增账号">
      <el-form :model="currentAccount">
        <el-form-item label="账号名称">
          <el-input v-model="currentAccount.account"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="currentAccount.role" placeholder="请选择角色">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="学生" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="currentAccount.password" type="password"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button @click="isAddDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveNewAccount">保存</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>
<style scoped></style>
